.btn.btn-arrow-right,
.btn.btn-arrow-left {
    --btn-edge-divisor: 3.5;
    --btn-full-half-divisor: 4;
    --bs-border-width: var(--border-width);
    --bs-btn-font-size: var(--excel-font-size);
    --bs-btn-line-height: 1.5;
}

.btn {
    --bs-btn-padding-y: 0.875rem;
    --bs-btn-padding-x: 0.125rem;
    padding: var(--bs-btn-padding-x) var(--bs-btn-padding-y);
    border-radius: var(--button-border-radius);
    background: var(--component-background-color);
    border: var(--border-width) solid var(--component-border-color);

    cursor: pointer;
    color: var(--text-color);
    /*white-space: nowrap;*/
}

.btn:focus {
    border: 1px solid var(--focus-color);
}

.btn:hover:not(:focus) { /* we want focus to have higher priority than hover*/
    border: 1px solid var(--component-hover-border-color);
}

/*Fix buttons paddings and margins in FF*/
.btn::-moz-focus-inner {
    border: 0;
    padding: 0;
    margin: 0;
}

.btn-primary {
}

.btn-secondary {
}

.btn:hover {
    background-color: var(--button-hover-background-color);
}

.btn:active { /* should come after ':hover' and ':focus' */
    background-color: var(--button-active-background-color);
}

.btn[disabled] {
    cursor: default;
    color: var(--disabled-text-color);
}
.btn[disabled]:hover {
    border: 1px outset var(--button-disabled-hover-border-color);
    background: var(--background-color);
}

.btn.active {
    background-color: var(--selection-color);
    --bs-btn-active-bg: var(--selection-color);
    /*border: 1px solid var(--component-border-color);*/
}

button:focus {
    background-color: var(--selection-color);
}

.btn-image {
}

.btn-group {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.btn-close {
    box-sizing: content-box;
    width: 0.625rem;
    height: 0.625rem;
    background: transparent var(--close-tab-button-x-url) center/0.5em auto no-repeat;
    border: 1px solid transparent;
    opacity: 0.5;

    padding: var(--border-comp-horz-padding);
}
.btn-close:hover {
    opacity: 0.75;
}
.btn-close:disabled, .btn-close.disabled {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    opacity: 0.25;
}

.property-toolbar-item:hover {
    --border-toolbar-item-padding : 0px;
    border: 1px solid var(--component-hover-border-color);
}

.btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.btn-check:checked + .btn {
    background: var(--selection-color);
}